<template>
  <div class="home">
    <h1>This is list page</h1>
    <ul class="list">
      <li class="list-item" v-for="i in 10" :key="i">this is page {{nowPage}} no {{i}} index</li>
    </ul>
    <page :total="98" :page.sync="nowPage" :groups="2"></page>
    <br>
    <button class="btn" @click="logout">退出登录</button>
    <modal
      v-model="modal.show"
      header="确认退出登录吗"
      @confirm="confirm"
      @cancel="cancel"
      ></modal>
  </div>
</template>

<script>
import Page from '../components/Page';

export default {
  name: 'home',
  components: {
    Page,
  },
  methods: {
    logout() {
      this.modal.show = true;
    },
    confirm() {
      this.$store.dispatch('userLogout').then(() => {
        this.$router.push('/login');
      });
    },
    cancel() {
      this.modal.show = false;
    },
  },
  data() {
    return {
      nowPage: 5,
      modal: {
        show: false,
      },
    };
  },
};
</script>

<style lang="less">
.list {
  margin-bottom: 20px;
  .list-item {
    line-height: 2;
  }
}
</style>
